<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.在JavaScript中导入Vue3源代码 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- 2.准备渲染容器 -->
    <div id="app">
        <!-- 在此进行表达式渲染 -->

        <!-- 2.1 渲染变量 -->
        <h1>{{ msg }}</h1>
        <!-- 2.2 渲染对象.属性 -->
        <p>我的姓名是{{ user.name }},今年{{ user.age }}岁,来自{{ user.address }}</p>
        <!-- 2.3 渲染三元运算符 -->
        <p>现在我{{ user.age >= 18 ? "已成年" : "未成年" }}</p>
        <!-- 2.4 函数的调用 -->
        <p>函数返回值:{{ fn() }}</p>
        <!-- 2.5 方法的调用 -->
        <p>标题中共有{{ msg.split(" ").length }}个单词</p>

    </div>
    <script>
        Vue.createApp({
            // Vue函数的入口函数，初始数据都需在在此处声明并返回
            setup() {
                const msg = "Hello World!"

                const user = {
                    name: "careathers",
                    age: 22,
                    address: "China"
                }

                const fn = () => {
                    return "666"
                }
                return {
                    msg,
                    user,
                    fn
                }
            }
        }).mount("#app")
    </script>
</body>
</html>